<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="流程定义ID" prop="processDefinitionId">
        <el-input
            v-model="queryParams.processDefinitionId"
            placeholder="请输入流程定义ID"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="复制自哪个流程" prop="copyFromId">
        <el-input
            v-model="queryParams.copyFromId"
            placeholder="请输入复制自哪个流程"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="公司" prop="companyId">
        <el-input
            v-model="queryParams.companyId"
            placeholder="请输入公司"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门" prop="deptId">
        <el-input
            v-model="queryParams.deptId"
            placeholder="请输入部门"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审批标题" prop="TITLE">
        <el-input
            v-model="queryParams.TITLE"
            placeholder="请输入审批标题"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表单名称[单据名称、表单名称统一名]" prop="billName">
        <el-input
            v-model="queryParams.billName"
            placeholder="请输入表单名称[单据名称、表单名称统一名]"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="实际提交人" prop="SUBMITTER">
        <el-input
            v-model="queryParams.SUBMITTER"
            placeholder="请输入实际提交人"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注" prop="currNodeId">
        <el-input
            v-model="queryParams.currNodeId"
            placeholder="请输入备注"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程完成时间" prop="completionTime">
        <el-date-picker clearable
                        v-model="queryParams.completionTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择流程完成时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="销假时长" prop="resumptionLeaveDuration">
        <el-input
            v-model="queryParams.resumptionLeaveDuration"
            placeholder="请输入销假时长"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注" prop="REMARK">
        <el-input
            v-model="queryParams.REMARK"
            placeholder="请输入备注"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最小部门名字" prop="leaveDeptName">
        <el-input
            v-model="queryParams.leaveDeptName"
            placeholder="请输入最小部门名字"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最小部门ID" prop="leaveDeptId">
        <el-input
            v-model="queryParams.leaveDeptId"
            placeholder="请输入最小部门ID"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门全路径ID" prop="leaveDeptAllId">
        <el-input
            v-model="queryParams.leaveDeptAllId"
            placeholder="请输入部门全路径ID"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门名字全路径" prop="leaveDeptAllName">
        <el-input
            v-model="queryParams.leaveDeptAllName"
            placeholder="请输入部门名字全路径"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="岗位ID" prop="positionId">
        <el-input
            v-model="queryParams.positionId"
            placeholder="请输入岗位ID"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否兼职岗位提交 1：是 0：不是" prop="concurrentPost">
        <el-input
            v-model="queryParams.concurrentPost"
            placeholder="请输入是否兼职岗位提交 1：是 0：不是"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工作地" prop="officeLocation">
        <el-input
            v-model="queryParams.officeLocation"
            placeholder="请输入工作地"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="紧急级别(-1:默认 1:紧急  0:紧急)" prop="emergencyLevel">
        <el-input
            v-model="queryParams.emergencyLevel"
            placeholder="请输入紧急级别(-1:默认 1:紧急  0:紧急)"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请部门" prop="applicationDeptId">
        <el-input
            v-model="queryParams.applicationDeptId"
            placeholder="请输入申请部门"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建人" prop="createBy">
        <el-input
            v-model="queryParams.createBy"
            placeholder="请输入创建人"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker clearable
                        v-model="queryParams.createTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新人" prop="updateBy">
        <el-input
            v-model="queryParams.updateBy"
            placeholder="请输入更新人"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime">
        <el-date-picker clearable
                        v-model="queryParams.updateTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['flow:instances:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['flow:instances:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['flow:instances:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['flow:instances:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="instancesList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="主键ID" align="center" prop="ID"/>
      <el-table-column label="流程定义ID" align="center" prop="processDefinitionId"/>
      <el-table-column label="复制自哪个流程" align="center" prop="copyFromId"/>
      <el-table-column label="公司" align="center" prop="companyId"/>
      <el-table-column label="部门" align="center" prop="deptId"/>
      <el-table-column label="审批标题" align="center" prop="TITLE"/>
      <el-table-column label="表单名称[单据名称、表单名称统一名]" align="center" prop="billName"/>
      <el-table-column label="实际提交人" align="center" prop="SUBMITTER"/>
      <el-table-column label="流程类型(套件)" align="center" prop="flowType"/>

      <FlowStatusColumn/>

      <el-table-column label="删除前的状态" align="center" prop="oldStatus"/>
      <el-table-column label="备注" align="center" prop="currNodeId"/>
      <el-table-column label="流程完成时间" align="center" prop="completionTime" width="180">
        <template #default="scope">
          <span>{{
              parseTime(scope.row.completionTime,
                  '{y}-{m}-{d}')
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回写表单" align="center" prop="JSON"/>
      <el-table-column label="流程子类型" align="center" prop="subType"/>
      <el-table-column label="0:未销假 1:有销假" align="center" prop="resumptionLeaveStatus"/>
      <el-table-column label="销假时长" align="center" prop="resumptionLeaveDuration"/>
      <el-table-column label="备注" align="center" prop="REMARK"/>
      <el-table-column label="最小部门名字" align="center" prop="leaveDeptName"/>
      <el-table-column label="最小部门ID" align="center" prop="leaveDeptId"/>
      <el-table-column label="部门全路径ID" align="center" prop="leaveDeptAllId"/>
      <el-table-column label="部门名字全路径" align="center" prop="leaveDeptAllName"/>
      <el-table-column label="岗位ID" align="center" prop="positionId"/>
      <el-table-column label="是否兼职岗位提交 1：是 0：不是" align="center" prop="concurrentPost"/>
      <el-table-column label="工作地" align="center" prop="officeLocation"/>
      <el-table-column label="紧急级别(-1:默认 1:紧急  0:紧急)" align="center" prop="emergencyLevel"/>
      <el-table-column label="申请部门" align="center" prop="applicationDeptId"/>
      <el-table-column label="创建人" align="center" prop="createBy"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{
              parseTime(scope.row.createTime,
                  '{y}-{m}-{d}')
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新人" align="center" prop="updateBy"/>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template #default="scope">
          <span>{{
              parseTime(scope.row.updateTime,
                  '{y}-{m}-{d}')
            }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                               v-hasPermi="['flow:instances:edit']">修改
                    </el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                               v-hasPermi="['flow:instances:remove']">删除
                    </el-button>-->
          <el-button link type="primary" icon="Preview" @click="showLog(scope.row)">日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <!-- 添加或修改流程实例 对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="instancesRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="流程定义ID" prop="processDefinitionId">
          <el-input v-model="form.processDefinitionId" placeholder="请输入流程定义ID"/>
        </el-form-item>
        <el-form-item label="复制自哪个流程" prop="copyFromId">
          <el-input v-model="form.copyFromId" placeholder="请输入复制自哪个流程"/>
        </el-form-item>
        <el-form-item label="公司" prop="companyId">
          <el-input v-model="form.companyId" placeholder="请输入公司"/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入部门"/>
        </el-form-item>
        <el-form-item label="审批标题" prop="TITLE">
          <el-input v-model="form.TITLE" placeholder="请输入审批标题"/>
        </el-form-item>
        <el-form-item label="表单名称[单据名称、表单名称统一名]" prop="billName">
          <el-input v-model="form.billName" placeholder="请输入表单名称[单据名称、表单名称统一名]"/>
        </el-form-item>
        <el-form-item label="实际提交人" prop="SUBMITTER">
          <el-input v-model="form.SUBMITTER" placeholder="请输入实际提交人"/>
        </el-form-item>
        <el-form-item label="备注" prop="currNodeId">
          <el-input v-model="form.currNodeId" placeholder="请输入备注"/>
        </el-form-item>
        <el-form-item label="流程完成时间" prop="completionTime">
          <el-date-picker clearable
                          v-model="form.completionTime"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择流程完成时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回写表单" prop="JSON">
          <el-input v-model="form.JSON" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="销假时长" prop="resumptionLeaveDuration">
          <el-input v-model="form.resumptionLeaveDuration" placeholder="请输入销假时长"/>
        </el-form-item>
        <el-form-item label="备注" prop="REMARK">
          <el-input v-model="form.REMARK" placeholder="请输入备注"/>
        </el-form-item>
        <el-form-item label="最小部门名字" prop="leaveDeptName">
          <el-input v-model="form.leaveDeptName" placeholder="请输入最小部门名字"/>
        </el-form-item>
        <el-form-item label="最小部门ID" prop="leaveDeptId">
          <el-input v-model="form.leaveDeptId" placeholder="请输入最小部门ID"/>
        </el-form-item>
        <el-form-item label="部门全路径ID" prop="leaveDeptAllId">
          <el-input v-model="form.leaveDeptAllId" placeholder="请输入部门全路径ID"/>
        </el-form-item>
        <el-form-item label="部门名字全路径" prop="leaveDeptAllName">
          <el-input v-model="form.leaveDeptAllName" placeholder="请输入部门名字全路径"/>
        </el-form-item>
        <el-form-item label="岗位ID" prop="positionId">
          <el-input v-model="form.positionId" placeholder="请输入岗位ID"/>
        </el-form-item>
        <el-form-item label="是否兼职岗位提交 1：是 0：不是" prop="concurrentPost">
          <el-input v-model="form.concurrentPost" placeholder="请输入是否兼职岗位提交 1：是 0：不是"/>
        </el-form-item>
        <el-form-item label="工作地" prop="officeLocation">
          <el-input v-model="form.officeLocation" placeholder="请输入工作地"/>
        </el-form-item>
        <el-form-item label="紧急级别(-1:默认 1:紧急  0:紧急)" prop="emergencyLevel">
          <el-input v-model="form.emergencyLevel" placeholder="请输入紧急级别(-1:默认 1:紧急  0:紧急)"/>
        </el-form-item>
        <el-form-item label="申请部门" prop="applicationDeptId">
          <el-input v-model="form.applicationDeptId" placeholder="请输入申请部门"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog center destroy-on-close title="显示日志" v-model="logVisible" width="1050px" append-to-body>
      <ApprovalLog :processInstancesId="processInstancesId"/>
    </el-dialog>
  </div>
</template>
<script setup name="Instances">
import {
  listInstances,
  getInstances,
  delInstances,
  addInstances,
  updateInstances,
  getLog
} from "@/api/flow/instances";
import moment from "moment";
import ApprovalLog from "@/views/flow/instances/ApprovalLog.vue";
import FlowStatusColumn from "@/components/EbComponent/TableColumn/FlowStatusColumn.vue";
const {proxy} = getCurrentInstance();
const instancesList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const logVisible = ref(false);
const processInstancesId = ref(undefined)
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    processDefinitionId: null,
    copyFromId: null,
    companyId: null,
    deptId: null,
    TITLE: null,
    billName: null,
    SUBMITTER: null,
    flowType: null,
    flowStatus: null,
    oldStatus: null,
    currNodeId: null,
    completionTime: null,
    JSON: null,
    subType: null,
    resumptionLeaveStatus: null,
    resumptionLeaveDuration: null,
    REMARK: null,
    leaveDeptName: null,
    leaveDeptId: null,
    leaveDeptAllId: null,
    leaveDeptAllName: null,
    positionId: null,
    concurrentPost: null,
    officeLocation: null,
    emergencyLevel: null,
    applicationDeptId: null,
    createBy: null,
    createTime: moment()
        .format("YYYY-MM-DD"),
    updateBy: null,
    updateTime: null
  },
  rules: {}
});
const {
  queryParams,
  form,
  rules
} = toRefs(data);
const showLog = (row) => {
  logVisible.value = true
  processInstancesId.value = row.ID
}
/** 查询流程实例 列表 */
function getList() {
  loading.value = true;
  listInstances(queryParams.value)
      .then(response => {
        instancesList.value = response.rows;
        total.value = response.total;
        loading.value = false;
      });
}
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}



// 表单重置
function reset() {
  form.value = {
    ID: null,
    processDefinitionId: null,
    copyFromId: null,
    companyId: null,
    deptId: null,
    TITLE: null,
    billName: null,
    SUBMITTER: null,
    flowType: null,
    flowStatus: null,
    oldStatus: null,
    currNodeId: null,
    completionTime: null,
    JSON: null,
    subType: null,
    resumptionLeaveStatus: null,
    resumptionLeaveDuration: null,
    REMARK: null,
    leaveDeptName: null,
    leaveDeptId: null,
    leaveDeptAllId: null,
    leaveDeptAllName: null,
    positionId: null,
    concurrentPost: null,
    officeLocation: null,
    emergencyLevel: null,
    applicationDeptId: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("instancesRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.ID);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加流程实例 ";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _ID = row.ID || ids.value
  getInstances(_ID)
      .then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改流程实例 ";
      });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["instancesRef"].validate(valid => {
    if (valid) {
      if (form.value.ID != null) {
        updateInstances(form.value)
            .then(response => {
              proxy.$modal.msgSuccess("修改成功");
              open.value = false;
              getList();
            });
      } else {
        addInstances(form.value)
            .then(response => {
              proxy.$modal.msgSuccess("新增成功");
              open.value = false;
              getList();
            });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const _IDs = row.ID || ids.value;
  proxy.$modal.confirm('是否确认删除流程实例 编号为"' + _IDs + '"的数据项？')
      .then(function () {
        return delInstances(_IDs);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {
      });
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download('flow/instances/export',
      {
        ...queryParams.value
      },
      `instances_${new Date().getTime()}.xlsx`)
}
getList();
</script>
